<template>
    <div class="login">
      <van-nav-bar title="用户登录"/>
      <div class="register-panel">
        <van-cell-group>
          <van-field 
            v-model="username"
            label="用户名"
            left-icon="contact"
            placeholder="请输入用户名"
            required
            clearable
            @click-icon="$toast('question')"
          />
          <van-field 
            v-model="password"
            type="password"
            label="密码" 
            left-icon="like-o"
            clearable
            placeholder="请输入密码"
            required
            @click-icon="$toast('question')"
          />
        </van-cell-group>
        <div class="register-button">
          <van-button type="primary" @click="loginAction" size="large" :loading="openLoading">登录</van-button>
        </div>
      </div>
    </div>
</template>

<script>
  // import axios from 'axios'
  // import url from '@/serviceAPI.config.js'
  import { Toast } from 'vant'
  export default {
    data() {
      return {
        username: '',
        password: '',
        openLoading:false, //是否开启用户注册的Loading状态
        usernameErrorMsg:'',  //当用户名出现错误时的提示信息
        passwordErrorMsg:'',  //当密码出现错误时的提示信息
      }
    },
    created(){
      if(localStorage.userInfo){
        Toast.success('您已经登录过了')
        this.$router.push('/home')
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      loginAction(){
        this.checkForm() && this.axiosLoginUser()
      },
      axiosLoginUser(){
        this.openLoading=true;
        localStorage.userInfo= {userName:this.username}
        this.$router.push('home')
      },
        //****表单验证方法
      checkForm(){
        let isOk = true
        if(this.username.length<1){
          this.usernameErrorMsg = "用户名不能少于5位"
          isOk=false
        }else{
          this.usernameErrorMsg = ''
        } 
        if(this.password.length<1){
          this.passwordErrorMsg = '密码不能少于6位'
          isOk = false
        }else{
          this.passwordErrorMsg = ''
        }
        return isOk
      } 
    }
  }
</script>

<style scoped>
    .register-panel{
      width:96%;
      border-radius: 5px;
      margin:20px auto;
      padding-bottom:80px;
    }
    .register-button{
      margin-top: 4rem;
      padding-top:10px;
    }
</style>